<template>
    <div class="com_container">
        <div class="com_chart" ref="hot_ref">
        </div>
        <span class="left" @click="toLeft" :style="comStyle">⇦</span>
        <span class="right" @click="toRight" :style="comStyle">⇨</span>
        <span class="title" :style="comStyle">{{curName}}</span>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getTheme } from '@/utils/theme_utils'
export default {
    // 组件名称
    name: 'hotChart',
    data() {
        return {
            chartInstance: null,
            allData: null,
            titleFontSize: 0,
            curIndex: 0,
            loading: null
        }
    },
    computed: {
        curName() {
            if (!this.allData) {
                return ''
            }
            else {
                return this.allData[this.curIndex].name
            }
        },
        comStyle() {
            return {
                fontSize: this.titleFontSize + 'px',
                color: getTheme(this.theme).titleColor
            }
        },
        ...mapState(['theme'])
    },
    methods: {
        // 初始化echarts实例对象
        async initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme)
            // 对图表初始化配置
            const initOption = {
                title: {
                    text: '热销商品占比',
                    left: 20,
                    top: 5,
                },
                series: [{
                    type: 'pie',
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                }],
                legend: {
                    top: '15%',
                    icon: 'circle'
                },
                tooltip: {
                    show: true
                }

            }
            this.chartInstance.setOption(initOption)
        },
        // 获取服务器数据
        getData(ret) {
            // ws调用getData的时候自动传入图标数据当作形参
            this.allData = ret
            this.updateChart()
        },
        // 更新图表
        updateChart() {
            const seriesData = this.allData[this.curIndex].children.map(item => {
                return {
                    name: item.name,
                    value: item.value,
                    children: item.children
                }
            })
            const legendArr = this.allData[this.curIndex].children.map(item => item.name)
            const dataOption = {
                series: [{
                    data: seriesData
                }],
                legend: {
                    value: legendArr
                },
                tooltip: {
                    formatter: arg => {
                        const chiArr = arg.data.children
                        let retStr = ''
                        chiArr.forEach(item => {
                            retStr += `${item.name}:${item.value} <br/>`
                        })
                        return retStr
                    }
                },
                // 隐藏指示线
                labelLine: {
                    show: false
                },
            }
            if (this.loading) {
                this.loading.close()
            }
            this.chartInstance.setOption(dataOption)
        },
        // 自适应配置更新
        adapter() {
            this.titleFontSize = document.body.clientWidth / 100 * 1.15
            const adapterOption = {
                title: {
                    fontSize: this.titleFontSize
                },
                legend: {
                    itemWidth: this.titleFontSize,
                    itemHeight: this.titleFontSize,
                    itemGap: this.titleFontSize / 2,
                    fontSize: this.titleFontSize / 2
                },
                series: [{
                    radius: this.titleFontSize * 4.5,
                    center: ['50%', '50%']
                }]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        toLeft() {
            this.curIndex--
            if (this.curIndex < 0) {
                this.curIndex = this.allData.length - 1
            }
            this.updateChart()
        },
        toRight() {
            this.curIndex++
            if (this.curIndex > this.allData.length - 1) {
                this.curIndex = 0
            }
            this.updateChart()
        }
    },
    created() {
        // 注册回调函数
        this.$scoket.registerCallBack('hotData', this.getData)
    },
    mounted() {
        this.initChart()
        this.loading = this.$loading({
            target: this.$refs.hot_ref,
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        // 获取数据需要使用客户端向服务端发送数据来获取
        this.$scoket.send({
            // 指明此次获取的信息
            action: 'getData',
            socketType: 'hotData',
            chartName: 'hotproduct',
            value: ''
        })
        window.addEventListener('resize', this.adapter)
        this.adapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.adapter)
        this.$scoket.unregisterCallBack('hotData')
    },
    watch: {
        theme() {
            console.log('zhuti');
            this.chartInstance.dispose()
            this.initChart()
            this.adapter()
            this.updateChart()
        }
    }
}
</script> 

<style scoped lang='less'>
.com_container {
    span {
        position: absolute;
        top: 50%;
        z-index: 10;
        color: aliceblue;
        font-size: 35px;
        font-weight: 700;
        cursor: pointer;
    }

    .left {
        left: 10%;
    }

    .right {
        right: 10%;
    }

    .title {
        top: 80%;
        right: 15%;
    }
}
</style>
